<template>
	<view class="flex">
		<image :src="item.activityUrl" mode="aspectFill" class="border-radius10 mc-flex-none" style="width: 228rpx;height: 184rpx;"></image>
		<view class="margin-left20 mc-flex-auto">
			<view class="mc-f13 mc-bold">{{item.activityName}}</view>
			<view class="margin-top6 mc-space-between">
				<text class="mc-f12 color-orange">原价 {{item.price}}{{item.unit||'点券'}}</text>
				<view class="mc-gray mc-f11">{{item.exchangeCount}}人已免费拿</view>
			</view>
			<view class="margin-top8 mc-flex-vcenter mc-f11" style="height: 30rpx;">
				<block v-if="isOngoing">
					<view class="progress-bar-wrap mc-flex-auto">
						<view class="bg-color-orange border-radius" style="height: 100%;" :style="{width:progress+'%'}"></view>
					</view>
					<text class="color-red mc-flex-none margin-left14">已砍{{progress}}%</text>
				</block>
			</view>
			<view class="mc-flex-end">
				<button type="primary" class="bargain-btn pct100" :class="isOngoing?'bargain-btn-orange':'bargain-btn-red'" @tap="toDrawDetails()">{{isOngoing?'继续砍价':'点击免费拿'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bargain-list-item',
		data() {
			return {};
		},
		props: {
			item: {
				type: Object,
				default: null
			},
		},
		computed: {
			isOngoing: function() { //是否进行中
				return this.item.status === 1
			},
			progress: function() { //百分比进度
				let progress = (parseFloat(this.item.cutDownPrice * 100) / this.item.price).toFixed(1);
				progress = progress > 100 ? 100 : progress;
				return progress || 0
			},
		},
		methods: {
			toDrawDetails() {
				const {
					id: bargainPartakeId,
					bargainId
				} = this.item;
				this.$util.debounce(() => {
					if (bargainPartakeId) {
						uni.navigateTo({
							url: `/pages/bargain/details/details?bargainPartakeId=${bargainPartakeId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/bargain/details/details?bargainId=${bargainId}`
						})
					}
				})()
			},
		}
	};
</script>

<style lang='scss' scoped>
	.progress-bar-wrap {
		background-color: #E1E1E1;
		border-radius: 1000px;
		height: 8rpx;
	}

	.bargain-btn {
		border-radius: 1000px;
		margin: 16rpx 0 0;
		padding: 0 40rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
	}

	.bargain-btn-orange {
		background-color: #2696ff;
	}

	.bargain-btn-red {
		background-color: #ff4826;
	}
</style>
